<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>jstree</title>
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/jstree/style.min.css" />
    <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" /> -->

    <script src="../static/jquery-3.3.1.min.js"></script>
    <script src="../static/jstree/jstree.min.js"></script>
</head>

<body>
    <div id="menuTree"></div>
    <script>
        $('#menuTree').jstree({
            'core': {
                'data': [
                    {
                        "id": "ajson1", "parent": "#", "text": "Simple root node", "state": {
                            "selected": true,"opened": true
                        }
                    },
                    { "id": "ajson2", "parent": "#", "text": "Root node 2", "state": {
                            "selected": false,"opened": true
                        }
                    },
                    {
                        "id": "ajson3", "parent": "ajson2", "text": "Child 1", "state": {
                            "selected": false,"opened": true
                        }
                    },
                    { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
                ],
                "themes": {
                    "variant": "large",//加大  
                    "ellipsis": true //文字多时省略  
                }
            },
        });

    </script>
</body>

</html>